<template>
  <div class="down-box">
    <el-drawer
      :model-value="drawer"
      title="下载任务"
      :size="900"
      direction="rtl"
      @close="drawer = false"
      style="border-top-left-radius: 4px;"
      :close-on-click-modal="true">
      <template #header="{ close, titleId }">
        <div class="drawer-head">
          <h4 :id="titleId">下载任务</h4>
          <el-button type="primary" @click="getList()" link style="font-size: 14px">
            刷新<el-icon><Refresh /></el-icon>
          </el-button>
        </div>
      </template>
      <div class="table">
        <el-alert title="下载数据仅保留一周，请及时下载文件" type="success" :closable="false"  effect="dark" style="background-color: #165DFF;margin-bottom: 10px;padding-left: 5px;"/>
        <complex-table ref="tableRef" v-loading="loading" :data="tableData" v-bind="tableProps">
          <template #status="{ row }">
            <FsDictLabel code="download_status" :value="row.status" />
          </template>
          <template #operate="{ row }">
            <FsButton type="primary" link size="small" @click="downLoadHandler(row)" :show-loading="row.isLoading" :key="Date.now()" v-if="row.fileUrl" >下载</FsButton>

          </template>
        </complex-table>
      </div>
      <div class="drawer-footer">
        <el-button type="primary" @click="drawer = false" style="font-size: 14px">关闭</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { FsDictLabel, datetimeFormatter } from '@fssc/admin';
import { ref, reactive, watch } from 'vue';
import { downloadPage,downloadRequest } from '@/api/common.ts';
const loading = ref(false);
const tableRef = ref();
const tableData = ref([]);
const tableHeight = () => {
  return document.documentElement.clientHeight - 181;
};
const name = 'downLoad';
const tableProps = reactive({
  code: `${name}Table`,
  autoTable: true,
  height: tableHeight(),
  columns: [
    { label: '下载时间', prop: 'createTime', formatter: datetimeFormatter, width: 160 },
    { label: '任务名称', prop: 'taskName' },
    { label: '结果', prop: 'status', width: 160, slot: 'status' },

    { label: '操作', prop: 'operate', width: 60, fixed: 'right', slot: 'operate' },
  ],
});
let drawer = defineModel({ default: false });

const getSuffix = (str: string) => {
  return str.substring(str.lastIndexOf("."))
}


const getList = () => {
  loading.value = true;
  const data = {
    pageNum: 1,
    pageSize: 1000,
  };
  downloadPage(data).then(rex => {
    rex.list.forEach(item => {
    if(item.fileUrl)  item.fileName = item.taskName + getSuffix(item.fileUrl)

    });
    tableData.value = rex.list;
    loading.value = false;
  }).catch((err) => {
    console.log(err, 'err');
    loading.value = false;
  })
};
const downLoadHandler = (item) => {
  item.isLoading = true;
  downloadRequest({ id: item.id },item.fileName).finally(rex => {
    item.isLoading = false
  })
}

watch(
  () => drawer.value,
  newVal => {
    if (newVal) getList();
  },
  { deep: true },
);
</script>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 0;
}
:deep(.el-drawer__body) {
  padding: 0;
  border: 4px solid #f4f5f6;
  border-bottom: none;
  .table-wrap {
    height: auto;
  }
}
.drawer-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  padding: 13px 20px;
  h4 {
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
    margin: 0;
    color: #1d2129;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}

:deep(.el-progress__text) {
  min-width: auto;
}
.drawer-footer {
  height: 71px;
  border-top: 8px solid #f4f5f6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}
.table {
  background: #fff;
  padding: 4px 4px 0 4px;
}
</style>
